<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>实名认证</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css" />
    <style>
        html,
        body {
            /*background: #fff;*/
        }

        .inner_header {
            font-size: 1.6rem;
            color: #000000;
            font-weight: 600;
            height: 6.9rem;
            margin: 0;
            padding: 2.4rem 0 0 0;
            box-sizing: border-box;
            background: none!important;
            box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
            background: #fff!important;
        }

        .content {
            width: 100%;
            float: left;
            margin: 6.9rem 0 0 0;
            box-sizing: border-box;
        }

        .content img {
            width: 100%;
            height: 17.95rem;
        }

        .content .content_head {
            width: 100%;
            height: 6.85rem;
            line-height: 6.85rem;
            text-align: center;
            font-size: 1.6rem;
            color: #000;
        }

        .content_list {
            background: #fff;
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding: 0 0 0 1.3rem;
            margin-bottom: 1rem;
        }

        .content_li {
            float: left;
            width: 100%;
            height: 4.45rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #333333;
            font-size: 1.5rem;
            line-height: 4.45rem;
            display: flex;
            text-align: center;
        }

        .content_li .text {
            line-height: 4.45rem;
            height: 4.45rem;
            flex: 1;
            margin: 0rem 0 0 2.55rem;
            font-size: 1.4rem;
            color: #000;
        }

        input::-webkit-input-placeholder {
            /* placeholder颜色  */
            color: #c1c1c1;
            /* placeholder字体大小 */
            font-size: 1.4rem;
            /* placeholder字间距  */
            letter-spacing: 0rem;
        }

        .content .btn {
            width: 93%;
            height: 4.7rem;
            opacity: 0.4;
            background-color: #ee6a20;
            line-height: 4.7rem;
            text-align: center;
            color: #fff;
            margin: 0 auto;
            font-size: 1.6rem;
            letter-spacing: 0.03rem;
            margin-top: 16.3rem;
            border-radius: 1.98rem;
        }
        .aui-toast .aui-toast-content{
            color:#fff
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
            <a class="aui-pull-left aui-btn" onclick="goBack()">
                <img src="../../../../image/back.png">
            </a>
            <div class="aui-title">实名认证</div>
        </header>
        <div class="content">
            <img src="../../../../image/capital/icon8.png" alt="">
            <div class="content_head">填写资料</div>
            <div class="content_list">
                <div class="content_li">
                    姓名
                    <input type="text" v-model="username" placeholder="请输入您的真实姓名" class="text" ref="refcode">
                </div>
                <div class="content_li">
                    身份证
                    <input type="text" v-model="card_id" placeholder="请输入您的真实身份证号" class="text" ref="refcode2">
                </div>
            </div>
            <div class="btn" ref="refcolor" @click="next" :style="(username&&card_id.length>15)?'opacity:1':''">下一步</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/axios.min.js"></script>
<script type="text/javascript" src="../../../script/axios-config.js"></script>
<script type="text/javascript" src="../../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../../script/utils.js"></script>
<script type="text/javascript" src="../../../../script/common.js"></script>
<script type="text/javascript" src="../../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../../script/aui-toast.js"></script>
<script type="text/javascript" src="../../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {
            var toast = new auiToast({})
            new Vue({
                el: "#app",
                data: {
                    username: '',
                    card_id: ''
                },
                methods: {
                    // 全部输入成功，进入下一个页面
                next: function() {
                        var data = {};
                        data["name"] = this.username
                        data["id_card"] = this.card_id
                        if(data["name"]&&data["id_card"].length>15){
                            data = verification(data)
                            if(data.code==1){
                                console.log("验证通过")
                                api.openWin({
                                     name: 'upload_id',
                                     url: './upload_id.html',
                                     pageParam: {
                                         data:data.data
                                     }
                                 });
                            }else {
                                toast.fail({
                                    title:data.data,
                                    duration:1000
                                });
                            }
                        }

                    }
                            // if(this.num && this.num2){
                            //   api.openWin({
                            //       name: 'upload_id',
                            //       url: './upload_id.html',
                            //       pageParam: {
                            //           test:''
                            //       }
                            //   });
                            // }
                }
            })
    };
    function goBack(name) {
        api.closeWin({});
    }
    //开始验证
    function verification(data) {
        for (let a in data) {
            switch (a) {
                case "name":
                    let user_name = data[a]
                    var regName =/^[\u4e00-\u9fa5]{2,10}$/;
                    if(!regName.test(user_name)){
                        let status = {code:0,data:"真实姓名填写有误"}
                        return status
                    }
                break;
                case "id_card":
                    let card_id = data[a]
                     card_id = isCardNo(card_id)
                    if(card_id==false){
                        let status = {code:0,data:"身份证号码不符"}
                        return status
                    }
                    break;
                default:
            }
        }
        let status = {
            code: 1,
            data: data
        }
        return status
    }
    function isCardNo(card_id) {
        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test(card_id) == false || !card_id) {
            return false;
        }
    }
</script>

</html>
